<template>


	<div class="exercises-wrong-exercises preview-conten" v-loading.fullscreen.lock="loading"
		element-loading-text="拼命加载中">
		
		<div class="preview-conten-l">
			
				<div class="knowledge-warp-l-nav">
					
					<div class="exercises-grade-type">
						<router-link to="/exercises/wrong">错题本</router-link>
						<span><i class="el-icon-arrow-right"></i>{{$route.query.name}}</span>
					</div>
					<ul class="question-bank-h-type">

						<li class="question-bank-h-list">
							<span>题型:</span>
							<div>
								<template>
									<el-radio-group v-model="question.type"  @change="getTestList">
										<template v-for="item of questionTypeList">
											<el-radio :label="item.id">{{item.name}}</el-radio>
										</template>
									</el-radio-group>
								</template>
							</div>
						</li>

						<li class="question-bank-h-list">
							<span>难度:</span>
							<div>
								<template>
								  <el-radio-group v-model="question.difficulty" @change="getTestList">
									  	<el-radio :label="0">全部</el-radio>
									  	<el-radio :label="11">容易</el-radio>
									  	<el-radio :label="12">普通</el-radio>
									  	<el-radio :label="13">困难</el-radio>
								  </el-radio-group>
								</template>
							</div>
						</li>

					</ul>
					
				</div>
				
				<ul class="preview-conten-subject">

					<template v-for="(item, index) of testList">


						<li class="preview-conten-subject-c"  v-if="parseInt(item.type_base_id) === 1 || parseInt(item.type_base_id) === 2 ||  parseInt(item.type_base_id) === 4 " :key="index">
								<i class="el-icon-close exercises-test-result"></i>
							<template>
								<div  v-if="item.pattern == 1" class="preview-conten-subject-t">
									<i>{{index+1}}. </i>
									<span v-html="item.content"></span>
									
								</div>
								<div  v-if="item.pattern == 2" class="preview-conten-subject-t">
									<i>{{index+1}}. </i>
									<!-- <span v-html="item.content"></span> -->
									<img :src="item.content" >
								</div>
							</template>

							<ul class="preview-topic" >
								<template  v-for="(option,index2) of item.option">
									<template v-if="item.pattern == 1">
										<li class="preview-subject-title option-checked"  :key="index2">
											<template v-if="!in_array( option.name, answerList[item.question_id].errorAnswer ) && item.correct_answer != null && in_array( option.name, item.correct_answer )">
												<el-checkbox 
												class="d" 
												disabled 
												:checked= 'true'
												:label="option.name">
												</el-checkbox>
												<div v-if="parseInt(item.type_base_id) !== 4 "  v-html="option.value"></div>
											</template>
											<template v-else-if="item.correct_answer != null && in_array( option.name, item.correct_answer )">
												<el-checkbox 
												class="a" 
												disabled 
												:checked= 'true'
												:label="option.name">
												</el-checkbox>
												<div v-if="parseInt(item.type_base_id) !== 4 "  v-html="option.value"></div>
											</template>
											<template v-else-if="answerList[item.question_id].answer != null && !in_array( option.name, item.correct_answer ) && in_array( option.name, answerList[item.id].errorAnswer )">
												<el-checkbox 
												class="b" 
												disabled 
												:checked= 'true'
												:label="option.name">
												</el-checkbox>
												<div  v-if="parseInt(item.type_base_id) !== 4 "  v-html="option.value"></div>
											</template>
											<template v-else>
												<el-checkbox  
												class="c"
												disabled 
												:label="option.name">
												</el-checkbox>
												<div v-if="parseInt(item.type_base_id) !== 4 "  v-html="option.value"></div>
											</template>	
										</li>
									</template>
									<template v-if="item.pattern == 2">
										<li class="preview-subject-title option-checked option-pattern"  :key="index2">
											<template v-if="!in_array( option.name, answerList[item.question_id].errorAnswer ) && item.correct_answer != null && in_array( option.name, item.correct_answer )">
												<el-checkbox 
												class="d" 
												disabled 
												:checked= 'true'
												:label="option.name">
												</el-checkbox>
												<!-- <div  v-html="option.value"></div> -->
											</template>
											<template v-else-if="item.correct_answer != null && in_array( option.name, item.correct_answer )">
												<el-checkbox 
												class="a" 
												disabled 
												:checked= 'true'
												:label="option.name">
												</el-checkbox>
												<!-- <div v-html="option.value"></div> -->
											</template>
											<template v-else-if="answerList[item.question_id].answer != null && !in_array( option.name, item.correct_answer ) && in_array( option.name, answerList[item.id].errorAnswer )">
												<el-checkbox 
												class="b" 
												disabled 
												:checked= 'true'
												:label="option.name">
												</el-checkbox>
												<!-- <div  v-html="option.value"></div> -->
											</template>
											<template v-else>
												<el-checkbox  
												class="c"
												disabled 
												:label="option.name">
												</el-checkbox>
												<!-- <div v-html="option.value"></div> -->
											</template>	
										</li>
									</template>
								</template>

							</ul>
							
							<el-collapse accordion class="preview-answer" v-if='1'>
								<el-collapse-item>
									<template slot="title">
										<div class="preview-accordion-title">
											<span>题型：{{item.question_type_name}}</span>
											<span>得分: 0</span>
										</div>
										<div class="accordion-operate" @click.stop="">
											<template>
												<a v-if="item.is_fav == false" class="accordion-open"   @click.stop="operationTest(item, 1)">收藏本题</a>
												<a v-else class="accordion-open"  >已收藏本题</a>
											</template>
											
											<a class="accordion-open"   @click.stop="operationTest(item, 2)">移出错题本</a>
										</div>
										
									</template>


									<div class="preview-accordion-answer">
										<span>正确答案： </span>
										<div v-if="item.correct_answer">
											<i v-for="answer of item.correct_answer">{{answer}}</i>
										</div>
									</div>

									<div class="preview-accordion-answer">
										<span>解析： </span>
										<template v-if="item.pattern == 1">
											<div v-html="item.resolve"></div>
										</template>
										<template v-if="item.pattern == 2">
											<div>
												<img :src="item.resolve">
											</div>
										</template>
									</div>
								</el-collapse-item>
							</el-collapse>
						</li>

						<li class="preview-conten-subject-c"  v-else  :key="index">
							<i class="el-icon-close exercises-test-result"></i>
							<template>
								<div  v-if="item.pattern === 1" class="preview-conten-subject-t">
									<i>{{index+1}}. </i>
									<span v-html="item.content"></span>
									
								</div>
								<div  v-if="item.pattern === 2" class="preview-conten-subject-t">
									<i>{{index+1}}. </i>
									<img :src="item.content" >
									
								</div>
							</template>
							
							<div class="knowledge-answer">
								<span>答案</span>
								<!-- <div class="knowledge-html" v-html="answerList[item.question_id].errorAnswer"></div> -->
								<div class="knowledge-html" v-if="answerList[item.question_id].errorAnswer" v-html="answerList[item.question_id].errorAnswer"></div>
								<div class="knowledge-html-un" v-else ><i class="el-icon-warning-outline"></i>未作答</div>
							</div>

							<el-collapse accordion class="preview-answer" v-if='1'>
								<el-collapse-item>
									<template slot="title">
										<div class="preview-accordion-title">
											<span>题型：{{item.question_type_name}}</span>
											<span>得分: 0</span>
										</div>
										<div class="accordion-operate" @click.stop="">
											<template>
												<a v-if="item.is_fav == false" class="accordion-open"   @click.stop="operationTest(item, 1)">收藏本题</a>
												<a v-else class="accordion-open" >已收藏本题</a>
											</template>
											<a class="accordion-open"   @click.stop="operationTest(item, 2)">移出错题本</a>
										</div>
										
									</template>

									<div class="preview-accordion-answer">
										<span>解析： </span>
										<template v-if="item.pattern == 1">
											<div v-html="item.resolve"></div>
										</template>
										<template v-if="item.pattern == 2">
											<div>
												<img :src="item.resolve">
											</div>
										</template>
									</div>
								</el-collapse-item>
							</el-collapse>
						</li>
					</template>

				</ul>

		</div>

		<div class="preview-conten-r test-paper-r">
			<ul class="exercises-wrong-info">
				<li><span>收集错题：</span>{{testList.length}}</li>
				<template v-for="item of typeList">
					<li v-if="item"><span>{{item.name}}：</span>{{item.children.length}}</li>
				</template>
			</ul>
			<el-button class="test-paper-primary" @click="wrongExercises()" type="primary">错题练习</el-button>
			<!-- <el-button @click="deldeteComment()">删除试卷</el-button> -->
			
		</div>
	</div>
</template>

<script>
	// import tinymce from "vue-tinymce-editor";
	// import CN from "./../../../assets/tinymce_languages/zh_CN.js";
	export default {
		// components: {tinymce},
		data(){
			return {
				headClassList:null,
				tasksVisible: false,
				radio: '',
				input: '',
				question: {
					type: 0,			/*题型*/
					difficulty: 0,		/*难度*/
					keyword: '',		/*关键字*/
					subject: this.$route.query.id,	/*科目id*/
					page: 1,			/*分页参数*/
					size: 10			/*分页参数*/
				},


				loading: true,
				questionTypeList: [],
				testList:[],		/* 试卷列表 */
				answerList: [],		/* 试卷答案 */
				typeList:[],

				// plugins: ["paste", "fullscreen", "link", "image"],
				// toolbar1: "",
				// toolbar2:
				//   "formatselect  | fontsizeselect | forecolor backcolor | fontselect bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | removeformat",
				// options: {
				// 	images_upload_handler: this.images_upload_handler,
				// 	language_url: CN,
				// 	images_upload_url: this.BASE_URL + "/api/resource/res_upload_permanent",
				// 	paste_data_images: true, // 粘贴的同时能把内容里的图片自动上传，非常强力的功能
				// 	paste_convert_word_fake_lists: false, // 插入word文档需要该属性
				// 	paste_webkit_styles: "all",
				// 	paste_merge_formats: true,
				// 	nonbreaking_force_tab: false,
				// 	paste_auto_cleanup_on_paste: false
				// },
				
			}
		},

		created(){
			
			this.getQuestionType()
			this.getTestList()
		},
		mounted(){
			this.$nextTick(()=>{
				
			})
		},
		destroyed(){
			this.headClassList && this.headClassList.remove('showActive')
		},
		methods: {
			/**
			 * 根据参数请求试卷详情
			 * @DateTime 2019-07-22T17:37:30+0800
			 * @return   {[type]}                 [description]
			 */
			getTestList(){

				this.loading = false
				let success = (res=>{

					this.testList = res.data.data;
					this.answerLis = []

					this.headClassList = document.querySelector('.wrong-txt').classList;
					this.headClassList.add('showActive')

					/*this.$nextTick(()=>{

						//改变试题 img 的 url
						let imgArr = document.querySelectorAll('.preview-conten-subject-c img')
						let baseUrl = sessionStorage.getItem('host_addr');
						for (var i = 0; i < imgArr.length; i++) {
							let _temp = imgArr[i].src
							imgArr[i].src = _temp.replace(location.protocol+'//'+location.host, baseUrl);
						}

					})*/

					let idArray = []
					this.testList.forEach((item, key)=>{
						
						if (item.type_base_id == 1 || item.type_base_id == 2 || item.type_base_id == 4) {

							item.correct_answer =  item.correct_answer != '' ? JSON.parse(item.correct_answer) : '';
							item.error_answer =  item.error_answer != '' ? item.error_answer : [];
							item.option = JSON.parse(item.option) ? JSON.parse(item.option) : [];	
						}else{
							 // item.error_answer = item.error_answer != '' ? item.error_answer : []
							// item.error_answer =  item.error_answer != [] ? JSON.parse(item.error_answer) : null;
						}

						// console.log(item.question_id)

		

						/*答案*/
						this.answerList[item.question_id] = {
							id: item.question_id,
							errorAnswer: item.error_answer ,
							correcAnswer: item.correct_answer 
						}

						// console.log(this.answerList)

						if (!idArray.includes(item.type_id)) {
							this.typeList[item.type_id] = {
								id: item.type_id,
								name: item.question_type_name,
								children: []
							}
						}

						idArray.push(item.type_id)
						idArray = [...new Set(idArray)]

						this.typeList.forEach((len, index)=>{
							if (len.id == item.type_id) {
								len.children.push({
									id: item.question_id,
									name: item.question_type_name,
								})
							}
							
						})
						
					});



					this.loading = false
				});
				let params = {
					user_id: this.$g.user_id,
					type_id: this.question.type,
					subject_id: this.question.subject,/*科目id*/
					difficulty_id: this.question.difficulty,/*难度id*/
					page_index: this.question.page,
					page_size: this.question.size,

				};

				let fail = (res=>{
					this.$message.error({
						duration: 8000,
						message: res.msg
					})
				})

				this.$ajax({
					url: 'api/newtest/error_question',
					method: 'get',
					params: params,
					func: {success: success, fail: fail}
				})
			},
			/**
			 * 请求题型数据
			 * @DateTime 2019-07-25T14:04:59+0800
			 * @return   {[type]}                 [description]
			 */
			getQuestionType(){

				let success = (res=>{
					this.questionTypeList = res.data;
					/*if (this.questionTypeList.length > 0) {
						this.questionTypeList.unshift({id: 0, name: '全部'})
					}*/
				});

				let params = {status: 1};

				this.$ajax({
					url: 'api/newtest/get_question_type',
					method: 'get',
					params: params,
					func: { success: success}
				})
			},
			/**
			 * type 参数对应不同的函数，
			 *
			 * 1.添加到我的题库
			 * 2.加入试卷
			 */
			operationTest(obj, type){
				switch(type){
					case 1:
						this.$confirm('是否收藏本题？', '收藏', {
							cancelButtonText: '取消',
							confirmButtonText: '确定',
							type: 'warning',
							customClass: "test-message"
						}).then(() => {
							
							let success = (res=>{
								this.$message.success(res.msg)
								this.getTestList()
							})
							let params = {
								user_id: this.$g.user_id,
								res_id: obj.question_id,
								origin: 2
							}
							
							this.$ajax.post('api/favourite/favourite', params, {func: {success: success}})
						}).catch(() => {});
						break;
					case 2:

						this.$confirm('是否移出错题本？', '移出', {
							cancelButtonText: '取消',
							confirmButtonText: '确定',
							type: 'warning',
							customClass: "test-message"
						}).then(() => {
							
							let success = (res=>{
								this.$message.success(res.msg)
								this.getTestList()
							});

							this.$ajax({
								url: 'api/newtest/error_question',
								method: 'delete',
								params: {id: obj.id},
								func: {success: success}
							})
						}).catch(() => {});
						break;
				}
			},
			/**
			 * type 参数对应不同的函数，
			 *
			 * 1.编辑
			 * 2.移除试题
			 * 3.设定分值
			 */
			operationQuestions(type){
				switch(type){
					case 1:
						this.$confirm('是否撤销？', '撤销公开', {
							cancelButtonText: '取消',
							confirmButtonText: '确定',
							type: 'warning',
							customClass: "test-message"
						}).then(() => {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}).catch(() => {});
						break;
					case 2:

						this.$confirm('确定要将该试题从本试卷移除么？', '提示', {
							cancelButtonText: '取消',
							confirmButtonText: '确定',
							type: 'warning',
							customClass: "test-message"
						}).then(() => {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}).catch(() => {});
						break;
					case 3:
						break;
				}
			},
			/**
			 * 发布任务表单
			 * @return {[type]} [description]
			 */
			 submitForm(formName) {
			 	this.$refs[formName].validate((valid) => {
			 		if (valid) {
			 			// alert('submit!');
			 		} else {
			 			console.log('error submit!!');
			 			return false;
			 		}
			 	});
			 },
			/**
			 * 错题练习
			 * @return {[type]} [description]
			 */
			wrongExercises(){
			    this.$confirm('要开始进行练习吗？', '练习', {
			        confirmButtonText: '确认',
			        cancelButtonText: '取消',
			        type: 'warning',
			        customClass: 'confirm-them',
			    }).then(() => {
			    	let query = this.$route.query
			    	this.$router.push({path:'/exercises/test-exercises',query: query})
			        
			    }).catch(() => {});
			},
			/**
			 * 删除错题本
			 * @return {[type]} [description]
			 */
			deldeteComment(){
			    this.$confirm('确定要将该试卷从卷库中删除吗？', '提示', {
			        confirmButtonText: '确认',
			        cancelButtonText: '取消',
			        type: 'warning',
			        customClass: 'confirm-them',
			    }).then(() => {

			        
			    }).catch(() => {});
			},
		}
	}
</script>